<template>
	<view class="login">
		<div class="top">
			<span class="iconfont icon-zuojiantou" @click="go"></span>
		</div>
		<div class="content">
			<div class="title" v-if="check==true">注册</div>
			<div class="title" v-if="check==false">登录</div>
			<view class="input">
				<!-- <u--form ref="form">
					<u-form-item>
						<u--input class="input-item"  prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					</u-form-item>
					<u-form-item>
						<u--input class="input-item" placeholder="请输入密码" prefixIcon="lock-open" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					</u-form-item>
					<u-form-item>
						<u--input v-if="check" placeholder="请确认密码" prefixIcon="lock-open" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					</u-form-item>
				</u--form> -->
				
				<u--form  :model="formDate" :rules="rules" ref="form1" >
							<u-form-item  prop="username" ref="item">
								<u--input v-model="formDate.username" placeholder="请输入用户名" prefixIcon="account"></u--input>
							</u-form-item>
							<u-form-item  prop="password" ref="item">
								<u--input v-model="formDate.password" placeholder="请输入密码" type="password" prefixIcon="lock-open"></u--input>
							</u-form-item>
							<u-form-item  prop="password1" ref="item" v-if="check">
								<u--input  v-model="formDate.password1" placeholder="请确认密码" type="password"  prefixIcon="lock-open"></u--input>
							</u-form-item>
				</u--form>
				
				<u-button class="input-button" color="linear-gradient(to right, rgb(92, 204, 132), rgb(92, 204, 132))" text="登录" @click="login" v-if="!check"></u-button>
				<u-button class="input-button" color="linear-gradient(to right, rgb(92, 204, 132), rgb(92, 204, 132))" text="注册" @click="login1" v-if="check"></u-button>
			</view>
			<div class="bottom">
				<span @click="check1" v-if="check==false">注册账号</span>
				<span @click="check1" v-if="check==true">去登陆</span>
				<span>忘记密码？</span>
			</div>
			<view class="checkbox">
					<checkbox-group @change="change">
						<label>
							<checkbox value="true" :checked="checkboxValue" />已阅读并同意用户协议&隐私声明
						</label>
					</checkbox-group>
			</view>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getlogin,getreg} from '../request/index.js'
	export default {
		data() {
			return {
				check:false,
				formDate:{},
				rules: {
					'username': {
					  type: String,
				      required: true,
					},
					 'password': {
					  type: Number,
					  max: 1,
				      required: true,
					},
					 'password1': {
					  type: Number,
					  max: 1,
				      required: true,
					}
				},
				checkboxValue:false,
				
			}
		},
		methods: {
			go(){
				uni.navigateBack(1)
			},
			check1(){
				if(this.check==false){
					this.check=true
					
				}else if(this.check==true){
					this.check=false
				}
				
			},
			async login(){
				// console.log(this.formDate);
				if( this.formDate.username==''||this.formDate.password==''){
					this.$refs.uToast.show({
						message: "请输入帐号密码",
					})
				}else if(this.checkboxValue){
					let res= await getlogin({username:this.formDate.username,password:this.formDate.password})
					console.log(res);
						if(res.data.data.phone==null){
							uni.navigateTo({
							url:"/pages/phoneNumber/phoneNumber"
						})
						}else  if(res.statusCode==200){
							let token=res.data.data.token
							uni.setStorageSync("token",token)
							let name=res.data.data.username
							uni.setStorageSync("name",name)
							let img=res.data.data.avatar
							uni.setStorageSync("img",img)
							uni.showToast({
								title:'登录成功'
							})
						console.log(res);
						}else if(res.statusCode==400){
							this.$refs.uToast.show({
								message: res.data.data,
							})
						}
					
						
				}else if(!this.checkboxValue){
					this.$refs.uToast.show({
						message: "请先阅读并同意用户协议&隐私声明",
					})
				}
				
			},
			change(e){
				this.checkboxValue=!this.checkboxValue
			},
			async login1(){
				console.log(this.formDate);
				if(this.formDate.username==''||this.formDate.password==''||this.formDate.password1==''){
					this.$refs.uToast.show({
						message: "请输入帐号密码",
					})
				}
				if(this.checkboxValue){
					let res= await getreg({username:this.formDate.username,password:this.formDate.password,repassword:this.formDate.password1})
					if(res.statusCode==422){
						this.$refs.uToast.show({
							message: res.data.data
						})
					}else if(res.statusCode==400){
						this.$refs.uToast.show({
							message: res.data.data
						})
					}else if(res.data.code==20000){
						uni.showToast({
						title:'注册成功'
					})
					}
					
					console.log(res);
					
				}else if(!this.checkboxValue){
					this.$refs.uToast.show({
						message: "请先阅读并同意用户协议&隐私声明",
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.login{
	width: 100%;
	height: 100%;
	position: relative;
	.top{
		width: 100%;
		height: 200px;
		background-image: linear-gradient(to right bottom ,#3cfcb0,#54ebce, #6fd8f0);
		padding: 20px;
		box-sizing: border-box;	
		span{
			font-size: 25px;
			color: #fff;
		}
	}
	.content{
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: 300px;
		box-sizing: border-box;
		padding: 20px 40px;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
		.input{
			margin-top: 20px;
			.input-item{
				margin-bottom: 30px;
			}
		}
		.input-button{
			margin-top: 30px;
		}
	}
	.bottom{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 20px;
		span:nth-child(1){
			color: #5ccc84;
		}
		span:nth-child(2){
			color: #8f809e;
		}
	}
	.checkbox{
		width: 100%;
		margin: 50px auto;
	}
}
</style>
